﻿/**
 * 发送AJAX请求 获取数据库中数据 构建树形结构Auth 在模态框中显示
 */
function fillAuthTree() {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");

    var ajaxReturn =  $.ajax({
        "url":"assign/get/all/auth.json",
        "type":"post",
        "dataType":"json",
        "async":false,
        beforeSend: function(request) {
            request.setRequestHeader(header, token);
        }

    });

    if(ajaxReturn.status != 200) {
        layer.msg("请求处理出错！响应状态码是："+ajaxReturn.status+" 说明是："+ajaxReturn.statusText);
        return ;
    }
    //可以使用zTree组装树 不同于Menu中在Handler方法中组装成树结构
    // 使用zTree简单JSON模式
    // 2.从响应结果中获取Auth的JSON数据
    // 从服务器端查询到的list不需要组装成树形结构，这里我们交给zTree去组装
    var authList = ajaxReturn.responseJSON.data;

    // 3.准备对zTree进行设置的JSON对象
    var setting = {
        "data": {
            "simpleData": {
                // 开启简单JSON功能
                "enable": true,

                // 使用categoryId属性关联父节点，不用默认的pId了
                "pIdKey": "categoryId"
            },
            "key": {
                // 使用title属性显示节点名称，不用默认的name作为属性名了
                "name": "title"
            }
        },
        "check": { 
            //显示checkBox
            "enable": true
        }
    };

    // 4.生成树形结构
    // <ul id="authTreeDemo" class="ztree"></ul>
    $.fn.zTree.init($("#authTreeDemo"), setting, authList);

    // 获取zTreeObj对象 用于展开节点
    var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");

    // 调用zTreeObj对象的方法，把节点展开
    zTreeObj.expandAll(true);

    //5.回显已经分配过的 查询已分配的Auth的id的数组
     ajaxReturn = $.ajax({
        "url":"assign/get/assigned/auth/id/by/role/id.json",
        "type":"post",
        "data":{
            "roleId":window.roleId
        },
         beforeSend: function(request) {
             request.setRequestHeader(header, token);
         },
         "dataType":"json",
        "async":false
    });

    if(ajaxReturn.status != 200) {
        layer.msg("请求处理出错！响应状态码是："+ajaxReturn.status+" 说明是："+ajaxReturn.statusText);
        return ;
    }

    //从响应结果中获取authIdArray
    var authIdArray =ajaxReturn.responseJSON.data;

    //6.根据authIdArray把树形结构中对应的节点勾选上
      // ①遍历authIdArray
    for (var i = 0; i <authIdArray.length ; i++) {
        var authId=authIdArray[i];

        // ②根据id查询树形结构中对应的节点
        var treeNode = zTreeObj.getNodeByParam("id",authId);

        // ③将treeNode设置为被勾选

        // checked设置为true表示节点勾选
        var checked = true;

        // checkTypeFlag设置为false，表示不“联动”，不联动是为了避免把不该勾选的勾选上
        var checkTypeFlag = false;

        // 执行
        zTreeObj.checkNode(treeNode,checked,checkTypeFlag);
    }


}

//声明专门的函数 显示删除的确认的模态框
function showConfirmModal(roleArray) {

    //打开模态框
    $("#confirmModal").modal('show');

    //清除旧数据
    $("#roleNameDiv").empty();

    // 在全局变量范围创建数组用来存放角色id
    window.roleIdArray = [];  //每次调用都会创建一个这样的数组 每次确认完 不用清空？

    //获取所选角色名称 填充文本 遍历roleArray
    for(var i=0; i<roleArray.length;i++){
        var role = roleArray[i];
        var roleName = role.roleName; //不是从数据库取 是从在前端中取
        $("#roleNameDiv").append(roleName+"<br/>");

        var roleId=role.roleId;

        // 调用数组对象的push()方法存入新元素
        window.roleIdArray.push(roleId);
    }

}

/**
 *
 * 生成分页效果 读取全局变量
 * 执行分页，生成页面效果，任何时候调用这个函数都会重新加载页面
 */
function generatePage() {

    //1.获取分页数据
    var pageInfo=getPageInfoRemote();

    //2.填充表格
    fillTableBody(pageInfo);


}

/**
 * 获取页面数据
 *远程访问服务器端程序获取pageInfo数据
 */
function getPageInfoRemote() {

    //csrf token
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");

    // 调用$.ajax()函数发送请求并接受$.ajax()函数的返回值 返回值不只是data(ResultEntity)还有响应头 响应体等信息
   var ajaxResult= $.ajax({
        "url":"role/get/page/info.json",
        "type":"post",
        "data":{
            "pageNum":window.pageNum,
            "pageSize":window.pageSize,
            "keyword":window.keyword
        },
        "dataType":"json",
        "async":false,  //使用同步方式
       //发送csrf token
       beforeSend: function(request) {
           request.setRequestHeader(header, token);
       }
        // "success":function (response) {
        //     var pageInfo = response.data;
        //     //调用填充表格函数 因为是异步请求
        //     // 若将填充方法在外边调用 不能确定谁先执行 则可能拿不到返回的数据
        //     fillTableBody(pageInfo);
        // },
        // "error":function () {
        // }
    });

   console.log(ajaxResult);

   //发送完请求后 要判断当前响应状态码是否为200 服务器处理是否成功
    var statusCode = ajaxResult.status;

    // 如果当前响应状态码不是200，说明发生了错误或其他意外情况，显示提示消息，让当前函数停止执行
    if(statusCode != 200){
        //响应状态码说明信息 ajaxResult.statusText
        layer.msg("失败！响应状态码="+statusCode+" 说明信息="+ajaxResult.statusText);
        return null;
    }

    // 如果响应状态码是200，说明请求处理成功，获取pageInfo
    var resultEntity = ajaxResult.responseJSON;

    //从resultEntity获取result属性 ：用来封装当前请求处理的结果是成功还是失败 逻辑上后台代码是否成功
    var result=resultEntity.result;

    // 判断result是否成功 应该不会拿到失败的 在Handler方法中返回的是成功的
    if(result == "FAILED") {
        layer.msg(resultEntity.message);
        return null;
    }

    // 确认result为成功后获取pageInfo
    var pageInfo = resultEntity.data;

    // 返回pageInfo
    return pageInfo;

}

/**
 * 填充表格
 * @param pageInfo
 */
function fillTableBody(pageInfo) {

    //清除tbody中的旧数据
    $("#rolePageBody").empty();
    //这里清空是为了让没有搜索结果时不显示导航条
    $("#Pagination").empty();

    //判断pageInfo是否有效 若无 在tbody中显示信息
    if(pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length ==0){
        $("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉！没有查询到您搜索的数据！");
        return;
    }

    //使用pageInfo的list属性填充tbody
    for(var i=0; i<pageInfo.list.length; i++){
        var role=pageInfo.list[i];

        var roleId = role.id;
        
        var roleName=role.name;

        //前三列
        /**
         *  <td>1</td>
            <td><input type="checkbox"></td>
            <td>PM - 项目经理</td>
         */
        var numberTd = "<td>"+(i+1)+"</td>";
        var checkboxTd = "<td><input id='"+roleId+"' class='itemBox' type='checkbox'></td>";
        var roleNameTd = "<td>"+roleName+"</td>";

        //按钮列
        /*
                  <td>
				      <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
				      <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
					  <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
				  </td>
         */
        var checkBtn = "<button id='"+roleId+"' type='button' class='btn btn-success btn-xs  checkBtn''><i class=' glyphicon glyphicon-check'></i></button>";

        // 通过button标签的id属性（别的属性其实也可以）把roleId值传递到button按钮的单击响应函数中，在单击响应函数中使用this.id
        var pencilBtn = "<button id='"+roleId+"' type='button' class='btn btn-primary btn-xs pencilBtn'><i class=' glyphicon glyphicon-pencil'></i></button>";

        // 通过button标签的id属性（别的属性其实也可以）把roleId值传递到button按钮的单击响应函数中，在单击响应函数中使用this.id
        var removeBtn = "<button id='"+roleId+"' type='button' class='btn btn-danger btn-xs removeBtn'><i class=' glyphicon glyphicon-remove'></i></button>";

        var buttonTd = "<td>"+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";

        //整个tr
        var tr = "<tr>"+numberTd+checkboxTd+roleNameTd+buttonTd+"</tr>";

        $("#rolePageBody").append(tr);

    }

    //调用生成分页导航条方法
    generateNavigator(pageInfo);
}

/**
 * 分页导航栏
 * @param pageInfo
 */
function generateNavigator(pageInfo) {

    //获取总记录数
    var totalRecord= pageInfo.total;

    //声明相关属性
    var properties = {
        "num_edge_entries": 3,								// 边缘页数
        "num_display_entries": 5,								// 主体页数
        "callback": paginationCallBack,						// 指定用户点击“翻页”的按钮时跳转页面的回调函数
        "items_per_page":pageInfo.pageSize,	            // 每页要显示的数据的数量
        "current_page": pageInfo.pageNum - 1,	// Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
        "prev_text": "上一页",									// 上一页按钮上显示的文本
        "next_text": "下一页"
    }

    //2.生成页码导航条
    $("#Pagination").pagination(totalRecord,properties);
}

/**
 * pagination回调函数 翻页时的回调函数
 * 不是马上调用的
 * @param pageIndex
 * @param jQuery
 */
function paginationCallBack(pageIndex,jQuery) {

    // 修改window对象的pageNum属性
    window.pageNum = pageIndex + 1;

    // 调用分页函数 这里为什么不用跳转页面？？？
    /*
    可能是因为 在分页函数中调用的获取pageInfo函数中会发送ajax请求 在ajax请求中
    会有请求参数（pageNum pageSize keyword ）
     由pagination会在点击页码时生成对应请求参数
     */
    generatePage();

    // 取消页码超链接的默认行为
    return false;
}